<?php 
	$_SESSION['realpage'] = true;

	error_reporting(0);
	
	// includes
	require_once "./class.GeneralServices.php";
	
	GeneralServices::getService()  
	or die("<!DOCTYPE HTML><html> <head> </head> <body><script type=\"text/javascript\">window.location = \"./Install.php\";</script></body></html>");
	
	$error = false;
	session_start();
	
	if (isset($_SESSION['error']) )
	{
		$error = $_SESSION['error']; //TODO: display error.
		unset( $_SESSION['error']);
		$_SESSION['error'] = false;
	}
	
	// prevent form-spoofing
	$spoof_preventer = GeneralServices::getService()->genRandomString();
	$_SESSION['spoof_preventer'] = $spoof_preventer;
	
	if(isset($_GET["kill"]))
	{
		$q=$_GET["kill"];
		if($q == true)
		{
			$_SESSION = array();		
		}
	}
?>

<!DOCTYPE HTML>
<html>
<head>
<?php require_once "./HtmlIncludes.php";?>
<title>Welcome To Urban Dynamics </title>
<script type="text/javascript">

function CheckIfAvailable(userName)
{
	if (window.XMLHttpRequest)
	  {// code for IE7+, Firefox, Chrome, Opera, Safari
	  xmlhttp=new XMLHttpRequest();
	  }
	else
	  {// code for IE6, IE5
	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	  }
	xmlhttp.onreadystatechange=function()
	  {
	  if (xmlhttp.readyState==4 && xmlhttp.status==200)
	    {
		    if(xmlhttp.responseText == 'false')
		    {
		    	$('#userNameAlert').css('visibility', 'visible');
		    	$('#userNameAlert').css('display', 'block');		    	
		    }
		    else
		    {
		    	$('#userNameAlert').css('visibility', 'hidden');
		    	$('#userNameAlert').css('display', 'none');
		    }
		}
	  };
	xmlhttp.open("GET","./ajax.php?method=handleavailable&sid="+"<?php echo session_id(); ?>"+"&handle="+userName,true);
	xmlhttp.send();
}
</script>
</head>
<body>
	<div class="headerDiv" align="right">
	<div class="LogoCont"><img alt="Urban Dynamics" src="./../Images/UrbanLogo.PNG"/></div> 
		<div id="loginDiv" style="vertical-align:middle; text-align:left;"> 
			<button name="LoginButton" id="create-user" style="width: 70px; margin-top: 20px; margin-right: 100px; border: 2px solid #b4bbcd;"> Login </button>    
			<button name="AdminButton" id="AdminButton" style="width: 70px; margin-top: 20px; margin-right: 100px; border: 2px solid #b4bbcd;"> Admin </button>
		</div>
		
		<div id="dialog-form" title="Login to Urban Dynamics">
			<p class="validateTips">All form fields are required.</p>
			<form id="LoginForm" action=".\panes.php" METHOD=POST onkeypress="EnterPressed(event);">
			<input type="hidden" name="argler" value="<?php echo $spoof_preventer ?>"/>
			<fieldset>
				<label for="name">User name</label>
				<br>
				<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />	
				<br>
				<label for="password">Password</label>
				<br>
				<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />		
			</fieldset>
			<p>Not Registered Yet?  Sign Up!</p>
			</form>
		</div>

		<div id="dialog-form-SignUp" title="Sign Up to Urban Dynamics">
			<p class="validateTips">All form fields are required.</p>
			<form id="RegisterForm" action=".\register.php" METHOD=POST>
			<input type="hidden" name="argler" value="<?php echo $spoof_preventer ?>"/>
			<fieldset>
				<label for="Firstname">First name</label>
				<br>
				<input type="text" name="Firstname" id="Firstname" class="text ui-widget-content ui-corner-all" />	
				<br>
				<label for="Lastname">Last name</label>
				<br>
				<input type="text" name="Lastname" id="Lastname" value="" class="text ui-widget-content ui-corner-all" />
				<br>
				<label for="Username">User name</label>
				<br>
				<input type="text" name="Username" id="Username" class="text ui-widget-content ui-corner-all" onblur="CheckIfAvailable(this.value)"/>	
				<br>
				<div style="visibility: hidden; display: none; color: red;" id="userNameAlert">This user name is already taken,<br>please choose another! </div>				
				<label for="Rpassword">Password</label>
				<br>
				<input type="password" name="Rpassword" id="Rpassword" value="" class="text ui-widget-content ui-corner-all" />
				<br>	
				<label for="Email">Email</label>
				<br>
				<input type="text" name="Email" id="Email" class="text ui-widget-content ui-corner-all" />	
				<br>
				<label for="Birthday">Birthday</label>
				<br>
				<input type="text" name="Birthday" id="Birthday" value="" class="text ui-widget-content ui-corner-all" />
				<br>
				<label for="About">About</label>
				<br>
				<textarea cols="16" rows="3" name="about" id="About" class="text ui-widget-content ui-corner-all"></textarea>	
			</fieldset>
			</form>
		</div>
		
	</div>
	<div style="padding-top:100px;">
		<div class="welcomeMSG ui-corner-all" style="border: 2px solid #b4bbcd; font-size: 2.5em; width: 550px; margin-left: 70px; text-align: center;">Welcome To Urban Dynamics</div>
		<div class="welcomeMSG ui-corner-all" style="text-align: center; font-size: large; border: 2px solid #b4bbcd; width: 400px; height: 200px; margin-left: 150px; margin-top: 20px;">  Urban Dynamics is a comfortable and friendly environment to interact with each other<br><br> Individually or via Social or professional groups<br><br><div onclick="$( '#dialog-form' ).dialog( 'open' );" class="mousOnHovercss" > connect now!</div></div>
		<div style="color: grey; margin-left: 105px; margin-top: 20px;">Urban Dynamics is not a trademark nor does it have any copyrights</div>		
	</div>
</body>
<script type="text/javascript">
$('#Birthday').datepicker({changeMonth: true, changeYear: true, maxDate: new Date(), yearRange: '1900:2012'});
$('#LoginButton').button();
$('#AdminButton').button().click(function(){
	 document.location.href="./Install.php";
});
$('#AdminButton').css('margin-top', '5px');


////////////////////////////////////////////////////////////////////////////////
$(function() {
	
	var fname = $( "#Firstname" ),
		lname = $( "#Lastname" ),
		uname = $( "#Username"),
		password = $( "#Rpassword" ),
		email = $( "#Email" ),
		bday  = $( "#Birthday" ),
		about = $( "#About" ),
		allFields = $( [] ).add( fname ).add( lname ).add( uname ).add( password ).add( email ).add( bday ).add( about ),
		tips = $( ".validateTips" );

	function updateTips( t ) {
		tips
			.text( t )
			.addClass( "ui-state-highlight" );
		setTimeout(function() {
			tips.removeClass( "ui-state-highlight", 1500 );
		}, 500 );
	}

	function checkLength( o, n, min, max ) {
		if ( o.val().length > max || o.val().length < min ) {
			o.addClass( "ui-state-error" );
			updateTips( "Length of " + n + " must be between " +
				min + " and " + max + "." );
			return false;
		} else {
			return true;
		}
	}

	function checkRegexp( o, regexp, n ) {
		if ( !( regexp.test( o.val() ) ) ) {
			o.addClass( "ui-state-error" );
			updateTips( n );
			return false;
		} else {
			return true;
		}
	}
	
	$( "#dialog-form-SignUp" ).dialog({
		autoOpen: false,
		height: 550,
		width: 350,
		modal: true,
		buttons: {
			"Create an account": function() {
				var bValid = true;
				allFields.removeClass( "ui-state-error" );

				bValid = bValid && checkLength( fname, "First name", 3, 16 );
				bValid = bValid && checkLength( lname, "Last tname", 3, 16 );
				bValid = bValid && checkLength( uname, "Username", 3, 16 );				
				bValid = bValid && checkLength( password, "Rpassword", 3, 16 );
				bValid = bValid && checkLength( email, "email", 6, 80 );
				bValid = bValid && checkLength( bday, "birthday", 10, 16 );
				bValid = bValid && checkLength( about, "about", 0, 200 );

				bValid = bValid && checkRegexp( fname, /^[a-z]([0-9a-z_])+$/i, "First name may consist of a-z, 0-9, underscores, begin with a letter." );
				bValid = bValid && checkRegexp( lname, /^[a-z]([0-9a-z_])+$/i, "Last name may consist of a-z, 0-9, underscores, begin with a letter." );
				bValid = bValid && checkRegexp( uname, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
				//bValid = bValid && checkRegexp( about, /^[a-z]([0-9a-z_])+$/i, "About may consist of a-z, 0-9, underscores, begin with a letter." );
				// From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
				bValid = bValid && checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "Email format invalid!" );
				bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
				$( "#About" ).val(replaceBR($( "#About" ).val()));
				if ( bValid ) {
					$( "#RegisterForm" ).submit();
					$( this ).dialog( "close" );
				}
			},
			Cancel: function() {
				$( this ).dialog( "close" );
			}
		},
		close: function() {
			allFields.val( "" ).removeClass( "ui-state-error" );
		}
	});
});

///////////////////////////////////////////////////////////////////////////////////
$(function() {
	
	var name = $( "#name" ),		
		password = $( "#password" ),
		allFields = $( [] ).add( name ).add( password ),
		tips = $( ".validateTips" );

	function updateTips( t ) {
		tips
			.text( t )
			.addClass( "ui-state-highlight" );
		setTimeout(function() {
			tips.removeClass( "ui-state-highlight", 1500 );
		}, 500 );
	}

	function checkLength( o, n, min, max ) {
		if ( o.val().length > max || o.val().length < min ) {
			o.addClass( "ui-state-error" );
			updateTips( "Length of " + n + " must be between " +
				min + " and " + max + "." );
			return false;
		} else {
			return true;
		}
	}

	function checkRegexp( o, regexp, n ) {
		if ( !( regexp.test( o.val() ) ) ) {
			o.addClass( "ui-state-error" );
			updateTips( n );
			return false;
		} else {
			return true;
		}
	}
	
	$( "#dialog-form" ).dialog({
		autoOpen: false,
		height: 300,
		width: 350,
		modal: true,
		buttons: {
			"Login": function() {
				var bValid = true;
				allFields.removeClass( "ui-state-error" );

				bValid = bValid && checkLength( name, "name", 3, 16 );
				bValid = bValid && checkLength( password, "password", 3, 16 );

				bValid = bValid && checkRegexp( name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter." );
				bValid = bValid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );

				if ( bValid ) {
					$( "#LoginForm" ).submit();
					$( this ).dialog( "close" );					
				}
			},"Sign Up": function(){
				$( this ).dialog( "close" );
				$( "#dialog-form-SignUp" ).dialog( "open" );
				
			},Cancel: function() {
				$( this ).dialog( "close" );
			}
		},
		close: function() {
			allFields.val( "" ).removeClass( "ui-state-error" );
		}
	});

	$( "#create-user" )
		.button()
		.click(function() {
			$( "#dialog-form" ).dialog( "open" );
		});
});

function EnterPressed(e)
{
	if(e.keyCode == 13)
	{
		$( "#LoginForm" ).submit();
	}
}
</script>
</html>
<?php 
	$_SESSION['realpage'] = false;
?>